// Go圈  关注
import { ScrollView, SafeAreaView, StyleSheet, Text, View, RefreshControl } from 'react-native'
import React, { useState, useCallback } from 'react'
import { attentionData } from './dataGoCircle' // 列表数据
import AttentionGuanzhu from './AttentionGuanzhu'

const promi = (timeout) => {
  return new Promise((resolve, reject) => {
    setTimeout(reject, timeout)
  })
}
const Attention = () => {
  const [list, setList] = useState(attentionData)
  // 下拉刷新
  const [refreshing, setRefreshing] = useState(false);
  const onRefresh = useCallback(() => {
    setRefreshing(true)
    promi(2000)
      .then(() => setRefreshing(false))
      .catch(err => { console.log('刷新失败'), setRefreshing(false) })
  }, []);
  // 触底刷新(会连续刷新3次)
  const _contentViewScroll = (e) => {
    var offsetY = e.nativeEvent.contentOffset.y; //滑动距离
    var contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度（所有范围）
    var oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度(可视范围)

    if (offsetY + oriageScrollHeight >= contentSizeHeight - 2) {
      console.log('触底了');
    } else if (offsetY + oriageScrollHeight <= 1) {
      //这个是没有数据了然后给了false  得时候还在往上拉
    } else if (offsetY == 0) {
      //这个地方是下拉刷新，意思是到顶了还在指行，可以在这个地方进行处理需要刷新得数据
    }
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} // 下拉刷新
        onMomentumScrollEnd={_contentViewScroll} // 触底刷新
      >
        {list.map(item => <AttentionGuanzhu data={item} key={item.id} />)}
      </ScrollView>
    </SafeAreaView>
  )
}

export default Attention

const styles = StyleSheet.create({
  container: {
    // flex:1,
    height: '100%',
    backgroundColor: 'pink',
    paddingBottom: 140
  }
})